import {useDispatch, useSelector} from "react-redux"
import {Card, Input, Space} from "antd"

const ShowRedux = () => {
    // 获取状态管理中的数据
    const word = useSelector((state: any) => state.word)

    const dispatch = useDispatch()

    const changeValue = (val) => {
        // 通过 dispatch 方法来修改状态管理中的数据
        dispatch({
            type: "update-word",
            payload: {
                word: val
            }
        })
    }

    return (
        <Card className="mb-20px">
            <div className="pb-20px">
                <span className="text-24px text-green"> {word} </span>
            </div>

            <Input style={{width: 500}}
                   placeholder="在这里输入内容, 将会更改状态管理中的数据"
                   onChange={(e) => changeValue(e.target.value)}/>
            <div className="mt-10px text-gray">
                你可以在更改数据后, 切换页面查看数据是否被保存
            </div>
        </Card>
    )
}

export default ShowRedux
